import React, { useState, useEffect, useRef } from 'react'
import {
    Card,
    Button,
    Input,
    Form,
    InputNumber,
    Cascader,
    message
} from "antd"
import { Link } from "react-router-dom"
import {findCascadeData} from "../../../apis/category"
import FileUpload from '../../../components/FileUpload'
import {addGoods} from "../../../apis/goods"
const { TextArea } = Input;

const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export default function ProductAdd() {
    const [options, setOptions] = useState([])
    const [typeId,setTypeId] = useState("")
    const [imgSrc,setImgSrc] = useState("")
    useEffect(()=>{
        fecthData()
    },[])
    const fecthData =async ()=>{
        const res = await findCascadeData()
        console.log(res);
        setOptions(res.data.data)
    }
    const onFinish =async (values) => {
        values.type = typeId
        values.imgSrc = imgSrc
        console.log(values);
        //提交
        const res = await addGoods(values)
        if(res.data.code){
            message.success("添加成功")
        }else{
            message.error("添加失败")
        }
    }
    const onTypeChangeEvent = (_,value2)=>{
        console.log(value2);
        //[{一级分类},{二级分类}]
        setTypeId(value2[1].id)
    }
    const getChildrenValueEvent = (value)=>{
        setImgSrc(value)
    }
    return (
        <Card title="添加商品" extra={<Link to="/home/list">返回</Link>} style={{ width: "100%" }}>
            <Form
                {...layout}
                name="basic"
                onFinish={onFinish}
            >
                <Form.Item
                    label="商品名字"
                    name="name"
                    rules={[
                        { required: true, message: '请输入商品名字' }
                    ]}
                >
                    <Input placeholder='请输入商品名字' />
                </Form.Item>
                <Form.Item
                    label="商品的描述"
                    name="title"
                    rules={[{ required: true, message: '请输入商品的基本描述' }]}
                >
                    <TextArea />
                </Form.Item>
                <Form.Item
                    label="商品的价格"
                    name="price"
                    rules={[{ required: true, message: '请输入价格信息' }]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    label="商品的分类"
                    name="type"
                >
                    {/* 存放一个级联 */}
                    <Cascader options={options} onChange={onTypeChangeEvent} placeholder="Please select" />
                </Form.Item>
                <Form.Item
                    label="上传图片"
                    name="imgSrc"
                >
                    {/* 存放图片上传的组件 */}
                    <FileUpload getChildrenValueEvent={getChildrenValueEvent}></FileUpload>
                </Form.Item>
                <Form.Item
                    label="商品的详情"
                    name="msg"
                    rules={[{ required: true, message: '请选择分类' }]}
                >
                    <TextArea />
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )
}
